<script setup lang="ts">
import { ref } from 'vue'
import { defaultHtml } from '../../data/defaultHtml'

const code = ref(defaultHtml)

const copyCode = async () => {
  try {
    await navigator.clipboard.writeText(code.value)
    alert('代码已复制到剪贴板')
  } catch (err) {
    alert('复制失败，请手动复制')
  }
}
</script>

<template>
  <div class="p-4 mx-auto max-w-7xl">
    <div class="mb-6">
      <h2 class="text-2xl font-bold">HTML实时预览</h2>
    </div>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
      <!-- 代码编辑区 -->
      <div class="space-y-4">
        <div class="relative overflow-hidden bg-gray-800 rounded-lg">
          <textarea
            v-model="code"
            class="w-full h-[500px] bg-gray-900 text-gray-100 p-4 font-mono resize-none focus:outline-none"
            spellcheck="false"
          ></textarea>
          <button
            @click="copyCode"
            class="absolute px-3 py-1 text-sm text-gray-200 bg-gray-700 rounded top-2 right-2 hover:bg-gray-600"
          >
            复制代码
          </button>
        </div>
      </div>

      <!-- 预览区 -->
      <div class="overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
        <div class="p-4 bg-gray-100 border-b dark:bg-gray-700 dark:border-gray-600">
          <h3 class="font-medium">预览</h3>
        </div>
        <div class="p-4">
          <iframe
            :srcdoc="code"
            class="w-full h-[500px] border-0 rounded"
            sandbox="allow-scripts allow-popups allow-modals"
            title="预览"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
textarea {
  tab-size: 2;
}
</style> 